	<div class="row ">
    		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark"> 
				<i class="fa fa-list-alt fa-fw"></i>
 窗口小部件
			<span>
    > TinyFramework窗口小部件 
</span>
		
</h1>
</div>

			<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
    		<ul id="sparks" >
    			<li class="sparks-info">
    				 <h5> 个人收入 <span class="txt-color-blue">$47,171</span></h5>
				<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
    					1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点流量 <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
				<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点营收 <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
				<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
		
</ul>
	
</div>
	
</div>

<div class="row ">
        <div class="col-sm-12">
            <div class="well ">
	        <button class="close" data-dismiss="alert">×</button>
        <h1><span class="semi-bold">TinyFramework</span> <i class="ultra-light">窗口小部件</i> <sup
                class="badge bg-color-red bounceIn animated">v 2.0</sup> <br>
            <small class="text-danger slideInRight fast animated"><strong>强力提升用户体验!</strong></small>
        </h1>

        <p>全新开发的革命性的窗口小部件，允许你比常规的小部件拥有更多的特性。你现在可以用实时的
            <a href="javascript:void(0)" class="semi-bold" rel="popover-hover" data-placement="bottom"
               data-content="<span class=''>你可以利用AJAX来加载内容。你甚至可以通过一个更新按钮来设置最新更新时间或通过定时器自动更新.</span>"
               data-html="true">
                AJAX载入</a>技术进行自动刷新。
            在窗口部件标题栏上添加<a href="javascript:void(0)" class="semi-bold" rel="popover-hover" data-placement="bottom"
                   data-content="你可以添加5种类型的操作按钮, 折叠, 编辑, 全屏, 删除和自定义按钮，通过自定义按钮可以用于处理自定义的操作. 你甚至可以修改这些操作按钮的顺序。你也可以为每个按钮设置自定义图标。你也可以添加你自己的自定义按钮、TAB页、进度条或其它内容。">
                无限多</a>的按钮和控件. 所有的窗口小部件
        </p> 
        
</div>
    
</div>

</div>
 
<section id="widget-grid" class="">
        <div class="row">
            <article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <div class="jarviswidget " id="wid-id-0"
                    >
<header>
        <h2><strong>默认</strong> <i>窗口小组件</i></h2>
    
</header>
                <div>
                        <div class="jarviswidget-editbox">
    						    <input type="text" class="form-control">
						<span class="note">
    <i class="fa fa-check text-success"></i> Change title to update and save instantly!
</span>
                    
</div>
                    <div class="widget-body ">
    						<p> 窗口小部件默认有10个像素的内边框，它可以通过添加样式<code>.no-padding</code>到<code>.widget-body</code>样式来移除，默认的窗口小部件拥有5个窗口小部件按钮，显示在窗口小部件标题栏的右上方。 </p>
						<a href="javascript:void(0);" class="btn btn-default btn-lg"> <strong>大</strong> <i>按钮</i></a>
                    
</div>
                
</div>
            
</div>
<!-- end widget -->
			 
			<div class="jarviswidget jarviswidget-color-blue" id="wid-id-1"
    				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				>
<header>
        <h2><i>修改</i><strong>标题</strong> </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    						    <input type="text" class="form-control">
						<span class="note">
    							<i class="fa fa-check text-success"></i>
							修改标题并保存可立即生效!
						
</span>
					
</div>
					<div class="widget-body ">
    						<h3 class="alert alert-info" $hId>
    激活操作按钮
</h3>
						<code>data-widget-editbutton </code>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
		 
		
			<div class="jarviswidget jarviswidget-color-greenLight" id="wid-id-3"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				>
<header>
        <h2><strong>全</strong> <i>屏幕</i></h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<h2 class="alert alert-success" $hId>
    使小组件全屏
</h2>
						<code>data-widget-fullscreenbutton</code>
						<br><br>
						<p>当在显示图像，画廊，表格或大数据或地图时非常有用。有许多有用的应用利用这个方法</p>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
		
			
			<div class="jarviswidget jarviswidget-color-red" id="wid-id-5"
    				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				>
<header>
        <h2><strong>删除</strong> <i></i></h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<h6 class="alert alert-warning semi-bold" $hId>
    							<i class="fa fa-times"></i> 通过删除窗口小部件，将从页面中<strong>删除</strong>这个窗口小部件，应该通过OnEvent事件处理来在后台从数据库中删除。
						
</h6>
						<code>data-widget-deletebutton</code>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
			
			<div class="jarviswidget " id="wid-id-7"
    				data-widget-togglebutton="false"
				data-widget-editbutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				>
<header>
        <h2><strong>窗口小部件</strong> <i>颜色</i></h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<div class="row">
							<div class="col-md-6 col-lg-8">
								<h5><strong>修改</strong> 并<i>保存</i> 窗口小部件<u>颜色</u></h5>
								<code>data-widget-colorbutton</code>
								<br>
								<br>
								<p>可以随意更换部件的标题背景颜色和框架会永久记住你所选择的部件的标题背景颜色。在任意页面的任意窗口小部件都可以这么做！!</p>
							</div>
							<div class="col-md-6 col-lg-4">
								<img src="img/demo/widget-colorpicker.png" alt="widget colorpicker"
									 class="pull-right hover-transparent img-responsive">
							</div>
						</div>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
			
			<div class="jarviswidget jarviswidget-color-pink" id="wid-id-9"
    				data-widget-colorbutton="false"
				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-comments"></i></span>    <h2><strong>标签和标记</strong></h2>
    					<div class="widget-toolbar ">
    						<div class="label label-success">
							<i class="fa fa-arrow-up"></i> 2.35%
						</div>
					
</div>
					<div class="widget-toolbar ">
    						<div class="badge bg-color-blue">
							99
						</div>
					
</div>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<div class="widget-body-toolbar text-center">
							<div class="badge bg-color-purple">
								小标记
							</div>
							<div class="label label-warning">
								<i class="fa fa-check"></i>我是一个大标签
							</div>
						</div>
						<p class="alert alert-info">
    							在窗口小部件的页脚或工具栏上添加标签
						
</p>
						<div class="widget-footer">
							<div class="badge bg-color-greenLight pull-left">
								13
							</div>
							<div class="label label-danger">
								<i class="fa fa-arrow-down"></i> -1.75%
							</div>
						</div>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
			
			<div class="jarviswidget " id="wid-id-11"
    				data-widget-colorbutton="false"
				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				>
<header>
        <h2><strong>标签</strong> <i>Widget</h2>
    					<ul id="widget-tab-1" class="nav nav-tabs pull-right">
						<li class="active">
							<a data-toggle="tab" href="#hr1"> <i class="fa fa-lg fa-arrow-circle-o-down"></i>
 <span
									class="hidden-mobile hidden-tablet"> 标签 1 </span> </a>
						</li>
						<li>
							<a data-toggle="tab" href="#hr2"> <i class="fa fa-lg fa-arrow-circle-o-up"></i>
 <span
									class="hidden-mobile hidden-tablet"> 标签 2 </span></a>
						</li>
					
</ul>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body " id="no-padding">
    						<div  id="" class="tab-content padding-10">
							<div class="tab-pane fade in active " id="hr1">
								<h4 class="alert alert-danger"> 在窗口小部件的标题栏可以添加TAB页 </h4>
                            某电视片播映引起轰动，演员均为业余人士，角色把握都很到位而且自然。
                            记者问：“那个店小二是谁演的？ 任劳任怨，随叫随到，加班还不给钱，从没怨言。”
                            答：“嗯，是很到位，以前干IT的”
							
</div>
							<div class="tab-pane fade" id="hr2">
    								<h4 class="alert alert-warning"> 查看 <a href="#ajax/general-elements.pagelet">普通元素</a>来获取更多选项 </h4>
                                据说有一位软件工程师，一位硬件工程师和一位项目经理同坐车参加研讨会。不幸在从盘山公路下山时坏在半路上了。于是两位工程师和一位经理就如何修车的问题展开了讨论。
                            　　硬件工程师说：“我可以用随身携带的瑞士军刀把车坏的部分拆下来，找出原因，排除故障。”
                            　　项目经理说：“根据经营管理学，应该召开会议，根据问题现状写出需求报告，制订计划，编写日程安排，逐步逼近，alpha测试，beta1测试和beta2测试解决问题。”
                            　　软件工程说：“咱们还是应该把车推回山顶再开下来，看看问题是否重复发生。”
							
</div>
						
</div>
						<div class="widget-footer text-right">
								<span class="onoffswitch-title">
									<i class="fa fa-check"></i> 是否显示TAB页
								</span>
								<span class="onoffswitch">
									<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-tabs"
										   checked="checked">
									<label class="onoffswitch-label" for="show-tabs">
										<span class="onoffswitch-inner" data-swchon-text="YES"
											  data-swchoff-text="NO"></span>
										<span class="onoffswitch-switch"></span>
									</label>
								</span>
						</div>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
	 
			<div class="jarviswidget" id="wid-id-13" data-widget-load="ajax/demowidget.pagelet"
				 data-widget-colorbutton="false" data-widget-colorbutton="false" data-widget-editbutton="false"
				 data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false"
				 data-widget-custombutton="false"> 
				<header>
					<h2><strong>刷新</strong> <i>部件</i></h2>
				</header> 
				<div> 
					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body"> 
						<p>这些内容将被Ajax方式加载的内容替换...</p>
					</div> 
				</div> 
			</div>
		
</article>
		<!-- end widgetGridCol-->
	 
	

		<!-- start widgetGridCol-->
		<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget jarviswidget-color-darken" id="wid-id-2" data-widget-editbutton="false"
				 data-widget-colorbutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false"> 
				<header>
					<span class="widget-icon"> <i class="fa fa-resize-vertical"></i> </span> 
					<h2 class="font-md"><strong>折叠</strong> <i>窗口小部件</i></h2>
				</header> 
				<div> 
					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body"> 
						<h2 class="alert alert-warning"> 这个小组件默认是展开的 </h2>
						<code>data-widget-togglebutton</code>
						<br><br> 
						<p>请注意，标题文字的大小比其他小部件的头略大</p>
					</div>  
				</div> 
			</div>
			
			
			<div class="jarviswidget " id="wid-id-4"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-collapsed="true"
				>
<header>
    <span class="widget-icon"><i class="fa fa-resize-vertical"></i></span>    <h2><strong><i>可折叠 </i></strong><small>窗口小部件</small></h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<h2 class="alert alert-warning"> This widget is collapsed by default </h2> 
						<code>data-widget-collapsed</code> 
					
</div>
				
</div>
			
</div>
<!-- end widget -->
		    

			<div class="jarviswidget jarviswidget-color-purple" id="wid-id-6"
    				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-deletebutton="false"
				>
<header>
        <h2><strong>进度</strong> <i>条</i></h2>
    					<div class="widget-toolbar ">
    						<div class="progress progress-striped active" rel="tooltip" data-original-title="55%"
							data-placement="bottom">
							<div class="progress-bar progress-bar-success"  role="progressbar" style="width: 55%">
55 %
</div>
						</div> 
					
</div>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body " id="no-padding">
    						<div class="widget-body-toolbar"> 
							<div class="btn-group">
								<button class="btn btn-default " type="button">
	<i class="fa fa-bold"></i>
</button>
								<button class="btn btn-default " type="button">
	<i class="fa fa-italic"></i>
</button>
								<button class="btn btn-default " type="button">
	<i class="fa fa-underline"></i>
</button>
							</div> 
							<div class="btn-group">
								<button class="btn btn-default " type="button">
	<i class="fa fa-align-left"></i>
</button>
								<button class="btn btn-default " type="button">
	<i class="fa fa-align-center"></i>
</button>
								<button class="btn btn-default " type="button">
	<i class="fa fa-align-right"></i>
</button>
								<button class="btn btn-default " type="button">
	<i class="fa fa-align-justify"></i>
</button>
							</div> 
						</div>
						<textarea class="form-control no-border" placeholder="Textarea" rows="4"> 
							这是一个文本框控件，下边是控件的页脚-上面是控件工具栏！ 
						</textarea>
						<div class="widget-footer"> 
							<button class="btn btn-sm btn-primary" type="button">
								保存
							</button> 
							<button class="btn btn-sm btn-danger disabled pull-left" type="button">
								删除
							</button> 
						</div> 
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			 
			 
			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-8"
    				data-widget-editbutton="false"
				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-hand-o-up"></i></span>    <h2><strong>窗口小组件</strong> <i>按钮</i></h2>
    					<div class="widget-toolbar ">
    						<a href="javascript:void(0);" class="btn btn-primary">按钮</a>
					
</div>
					<div class="widget-toolbar ">
    						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default btn-xs active">
								<input type="radio" name="style-a1" id="style-a1"> <i class="fa fa-play"></i>
							</label>
							<label class="btn btn-default btn-xs">
								<input type="radio" name="style-a2" id="style-a2"> <i class="fa fa-pause"></i>
							</label>
							<label class="btn btn-default btn-xs">
								<input type="radio" name="style-a2" id="style-a3"> <i class="fa fa-stop"></i>
							</label>
						</div>
					
</div>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<h4 class="alert alert-info" $hId>
    可以手动或动态的给标题栏增加按钮
</h4>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
			
			<div class="jarviswidget jarviswidget-color-orange" id="wid-id-10"
    				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-deletebutton="false"
				>
<header>
        <h2><strong>拥有</strong> <i>翻页</i></h2>
    					<div class="widget-toolbar ">
    						<ul class="pagination pagination-xs">
							<li class="disabled">
								<a href="javascript:void(0);">前一页</a>
							</li>
							<li class="active">
								<a href="javascript:void(0);">1</a>
							</li>
							<li>
								<a href="javascript:void(0);">2</a>
							</li>
							<li>
								<a href="javascript:void(0);">3</a>
							</li>
							<li>
								<a href="javascript:void(0);">下一页</a>
							</li>
						</ul>
					
</div>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body " id="no-padding">
    						<p class="alert alert-success">
    							<strong><i class="fa fa-check"></i> 警告</strong>没有内边框...
						
</p>
						<p class="padding-10"> 请注意这个小工具的内部没有内边框!</p>
						<div class="widget-footer"> 
							<button class="btn btn-sm btn-success disabled" type="button">
								前一页
							</button> 
							<button class="btn btn-sm btn-success" type="button">
								后一页
							</button> 
						</div>
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
			
			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-12"
    				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-deletebutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-arrow-down"></i></span>    <h2><strong>窗口小部件</strong> <i><u>拥有</u> 下拉列表</i></h2>
    					<div class="widget-toolbar ">
    						<div class="btn-group">
							<button class="btn dropdown-toggle btn-xs btn-warning" data-toggle="dropdown">
								下拉列表 <i class="fa fa-caret-down"></i>
							</button>
							<ul class="dropdown-menu pull-right">
								<li>
									<a href="javascript:void(0);">选项 1</a>
								</li>
								<li>
									<a href="javascript:void(0);">选项 2</a>
								</li>
								<li>
									<a href="javascript:void(0);">选项 3</a>
								</li>
							</ul>
						</div>
					
</div>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						可以非常容易的在窗口小部件标题栏中添加下拉操作，需要给下拉按钮添加<i>btn-xs</i>样式.
					
</div>
				
</div>
			
</div>
<!-- end widget -->
		   
		   
			<div class="jarviswidget jarviswidget-sortable" id="wid-id-14" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" role="widget" style=""> 
				<!-- widget options:
					usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
					
					data-widget-colorbutton="false"	
					data-widget-editbutton="false"
					data-widget-togglebutton="false"
					data-widget-deletebutton="false"
					data-widget-fullscreenbutton="false"
					data-widget-custombutton="false"
					data-widget-collapsed="true" 
					data-widget-sortable="false"
					
				-->
				<header role="heading">
					<h2><strong>控件</strong><i> 开关</i> </h2>		
							
					<div class="widget-toolbar" id="switch-1" role="menu" style="display: none;">
						<span class="onoffswitch-title"><i class="fa fa-location-arrow"></i> 风格 1</span>
						<span class="onoffswitch">
							<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
							<label class="onoffswitch-label" for="myonoffswitch"> 
								<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span> 
								<span class="onoffswitch-switch"></span> </label> 
							</span>
					</div>
					
					<div class="widget-toolbar" id="switch-2" style="display: block;" role="menu">
						<div class="smart-form">
							<label class="toggle">
								<input type="checkbox" id="demo-switch-to-pills" name="checkbox-toggle">
								<i data-swchon-text="ON" data-swchoff-text="OFF"></i>
								<em class="fa fa-location-arrow"></em> 风格 2</label>
						</div>
					</div>
				<span class="jarviswidget-loader"><i class="fa fa-refresh fa-spin"></i></span></header>

				<!-- widget div-->
				<div role="content">
					
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
						
					</div>
					<!-- end widget edit box -->
					
					<!-- widget content -->
					<div class="widget-body">
						
						<h4 class="alert alert-info">点击开关开关，切换风格 </h4>
						
						<div class="btn-group" data-toggle="buttons">
							
					        <label class="btn btn-default btn-sm">
					          <input type="radio" name="checkbox-style" id="checkbox-style-1" value="switch-1"> <strong>开关</strong> <i>风格 1</i>
					        </label>
					        
					        <label class="btn btn-default btn-sm active">
					          <input type="radio" name="checkbox-style" id="checkbox-style-2" value="switch-2"> <strong>开关</strong> <i>风格 2</i>
					        </label>
					        
					    </div>		
						
					</div>
					<!-- end widget content -->
					
				</div>
				<!-- end widget div -->
				
			</div>

			
			<div class="jarviswidget jarviswidget-color-darken" id="wid-id-16"
    				data-widget-sortable="false"
				data-widget-colorbutton="false"
				data-widget-togglebutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-deletebutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-lock"></i></span>    <h2><strong>锁定</strong> <i>窗口小部件</i></h2>
    					<div class="widget-toolbar smart-form">
    						<label class="input"> <i class="icon-append fa fa-question-circle"></i>
							<input type="text" placeholder="点击以显示提示">
							<b class="tooltip tooltip-top-right">
                                <i class="fa fa-warning txt-color-teal"></i>
								一些有用的信息</b>
						</label> 
					
</div>
 <!-- end jarvisWidgetToolbar -->
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<p class="alert alert-success">
    <i class="fa fa-lock"></i>
                        锁定部件锁定小工具到网格（您将无法拖动这个小工具）。也可以让你在窗口小部件标题栏添加和使用输入文本框。
                         
</p>
						<code>data-widget-sortable="<strong>false</strong>"</code>	
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			
			
			<div class="jarviswidget jarviswidget-color-greenDark" id="wid-id-18"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				>
<header>
        <h2><strong>固定</strong> <i>高度</i></h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    						    <input type="text" class="form-control">
						<span class="note">
    							<i class="fa fa-check text-success"></i> 修改标题可立即保存!
						
</span>
					
</div>
					<div class="widget-body " id="no-padding">
    						<div class="widget-body-toolbar"> 
							<div class="row"> 
								<div class="col-xs-9 col-sm-5 col-md-5 col-lg-5">
									<div class="input-group">
										<span class="input-group-addon"><i class="fa fa-search"></i></span>
										<input class="form-control" id="prepend" placeholder="过滤" type="text">
									</div>
								</div>
								<div class="col-xs-3 col-sm-7 col-md-7 col-lg-7 text-right"> 
									<button class="btn btn-success">
										<i class="fa fa-plus"></i> <span class="hidden-mobile">增加新行</span>
									</button> 
								</div> 
							</div> 
						</div> 
						<div class="custom-scroll table-responsive" style="height:290px; overflow-y: scroll;"> 
							<table class="table table-bordered">
								<thead>
								<tr>
									<th><i class="fa fa-key text-warning"></i> 授权码</th>
									<th>用户名 <i class="text-danger">!</i></th>
									<th>日期</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td>C87E48EF-605A-B4FF</td>
									<td>erat@montesnasceturridiculus.org</td>
									<td>10/03/13</td>
								</tr>
								<tr>
									<td>5DDA79E7-890F-064D</td>
									<td>Nunc.lectus@ipsum.co.uk</td>
									<td>28/12/13</td>
								</tr>
								<tr>
									<td>468459AA-7933-C017</td>
									<td>vitae.mauris.sit@tempordiamdictum.net</td>
									<td>25/02/14</td>
								</tr>
								<tr>
									<td>C3006C18-4677-D2CE</td>
									<td>nec.urna.suscipit@acrisusMorbi.edu</td>
									<td>06/07/14</td>
								</tr>
								<tr>
									<td>E535C188-FDF4-90CB</td>
									<td>lobortis@pedeacurna.com</td>
									<td>28/12/12</td>
								</tr>
								<tr>
									<td>95489E95-9602-18B7</td>
									<td>egestas.lacinia.Sed@In.ca</td>
									<td>17/07/14</td>
								</tr>
								<tr>
									<td>D34E6661-D81A-9328</td>
									<td>arcu@lectus.ca</td>
									<td>14/10/14</td>
								</tr>
								<tr>
									<td>C72D2C04-458F-EBD0</td>
									<td>ut.pharetra.sed@vulputatevelit.net</td>
									<td>30/04/14</td>
								</tr>
								<tr>
									<td>10CAFA5C-AB4B-8B45</td>
									<td>arcu.eu.odio@Duis.co.uk</td>
									<td>14/02/13</td>
								</tr>
								<tr>
									<td>AA4F5CBA-1CE8-85B7</td>
									<td>nec@rutrum.net</td>
									<td>06/02/14</td>
								</tr>
								<tr>
									<td>2D816071-8F99-B315</td>
									<td>Praesent.luctus.Curabitur@elementum.ca</td>
									<td>27/09/13</td>
								</tr>
								<tr>
									<td>41BDB60C-C6EA-54EB</td>
									<td>Nunc.sed.orci@sitamet.org</td>
									<td>18/11/13</td>
								</tr>
								<tr>
									<td>43F3D48B-FEF3-776E</td>
									<td>eu.erat@nequevitaesemper.com</td>
									<td>23/04/13</td>
								</tr>
								<tr>
									<td>2521899F-79B9-B309</td>
									<td>mattis.velit@risusQuisque.ca</td>
									<td>04/07/13</td>
								</tr>
								<tr>
									<td>D08994C9-DCB1-948B</td>
									<td>Proin@metusAliquam.net</td>
									<td>27/07/13</td>
								</tr>
								<tr>
									<td>7AD2C774-36BA-0B2B</td>
									<td>tincidunt@Lorem.com</td>
									<td>01/07/14</td>
								</tr>
								<tr>
									<td>162C0373-FF3B-2469</td>
									<td>ante.dictum.cursus@ultrices.org</td>
									<td>10/02/13</td>
								</tr>
								<tr>
									<td>05641987-3D48-DD72</td>
									<td>lorem.ut.aliquam@Sednecmetus.org</td>
									<td>16/08/14</td>
								</tr>
								<tr>
									<td>3A173E5A-192A-0D5D</td>
									<td>nunc.risus@vitae.org</td>
									<td>04/04/13</td>
								</tr>
								<tr>
									<td>67081066-E0B5-9E37</td>
									<td>lectus@sed.org</td>
									<td>10/12/14</td>
								</tr>
								<tr>
									<td>C677C05F-7D98-C3E9</td>
									<td>auctor.quis@Morbi.org</td>
									<td>30/03/13</td>
								</tr> 
								</tbody>
							</table> 
						</div> 
					
</div>
				
</div>
			
</div>
<!-- end widget -->
			<!-- end jarvisWidget-->
		 
</article>
		 <!-- end widgetGridCol-->
	
</div>
	<!-- end widgetGridRow-->
 

	<!-- start widgetGridRow-->
    <div class="row">
    		<!-- start widgetGridCol-->
        <article class="col-sm-12">
                <div class="well ">
	            <h1>基础用法</h1>
                <div class="alert alert-info">
                    注意: 如果你想让属性<strong>data-attribute</strong>的值为true的话，你必须删除该属性，如果仅仅将该属性的值修改为<strong>false</strong>的话,比如，<code>
                    data-widget-togglebutton="true"</code>，它仍将显示为true的效果。
                
</div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th style="width:25%">HTML5 data 属性 / CSS / HTML</th>
                    <th style="width:15%">追加都后面的属性值</th>
                    <th style="width:15%">示例</th>
                    <th style="width:45%">描述</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>data-widget-sortable</td>
                    <td><code>header</code></td>
                    <td>false</td>
                    <td>小部件不做排序<i>(只有设置为false时才起作用)</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-icon</td>
                    <td><code>.jarviswidget</code></td>
                    <td>fa fa-trash</td>
                    <td>在部件的头部使用一个图标<i>(要查看所有的图表，请浏览图表章节)</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-togglebutton</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
                    <td>防止部件出现一个切换按钮<i>(只有设置为false时才起作用)</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-deletebutton</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
                    <td>防止部件出现一个删除按钮<i>(只有设置为false时才起作用)</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-editbutton</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
                    <td>防止部件出现一个编辑按钮<i>(只有设置为false时才起作用)</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-fullscreenbutton</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
                    <td>防止部件出现一个全屏按钮<i>(只有设置为false时才起作用)</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-load</td>
                    <td><code>.jarviswidget</code></td>
                    <td>widget-ajax.php</td>
                    <td>通过ajax加载的文件。</td>
                </tr>
                <tr>
                    <td>data-widget-refresh</td>
                    <td><code>.jarviswidget</code></td>
                    <td>10</td>
                    <td>快速刷新一个ajax文件<i>(请查看 'data-widget-load')</i>.</td>
                </tr>
                <tr>
                    <td>data-widget-refreshbutton</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
					<td>显示刷新按钮时，防止出现一个ajax小部件<i>(只有设置为false时才起作用)</i>.</td> 
                </tr>
                <tr>
                    <td>data-widget-hidden</td>
                    <td><code>.jarviswidget</code></td>
                    <td>true</td>
                    <td>在加载时，隐藏该部件<i>(只有设置为true时才起作用)</i>.</td> 
                </tr>
                <tr>
                    <td> data-widget-colorbutton</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
                    <td>默认是激活状态，设置为false时，隐藏。</td>
                </tr>
                <tr>
                    <td>data-widget-collapsed</td>
                    <td><code>.jarviswidget</code></td>
                    <td>false</td>
                    <td>加载时，小部件是折叠的。<i>(只有设置为true时才起作用)</i>. 当加载任何页面时，总是处于折叠状态。</td>
                </tr>
                <tr>
                    <td>data-widget-grid</td>
                    <td><code>article</code></td>
                    <td>false</td>
                    <td>
						你可以将可排序或者可删除从这个网格中排除，意思是在这个区域的所有widget都可以正常工作，但不能删除，也不能做排序。
						将该属性<i>(只有设置为false时才起作用)</i>添加到grid元素中。 
                    </td>
                </tr>
                <tr>
                    <td><code>.no-padding</code></td>
                    <td><code>.widget-body</code></td>
                    <td>n/a</td>
                    <td>移除所有的内部控件填充体</td>
                </tr>
                <tr>
                    <td><code>.well</code></td>
                    <td><code>.jarviswidget</code></td>
                    <td>n/a</td>
                    <td>将一个控件转化为一个容器</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">
						这些HTML5属性可以在widget选项中单独使用。 
						主要选项可以在widgets插件中自动改变。
                        注意: data属性只能有一个boolean值(请参照上面)!
                    </td>
                </tr>
                </tfoot>
            </table>
            
</div>
        
</article>
		<!-- end widgetGridCol-->
    
</div>
<!-- end row -->

</section>
<!-- end widget grid -->





<script type="text/javascript">
	
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	// PAGE RELATED SCRIPTS

	// pagefunction
	
	var pagefunction = function() {
		
		// switch style change
		$('input[name="checkbox-style"]').change(function() {
			//alert($(this).val())
			$this = $(this);
	
			if ($this.attr('value') === "switch-1") {
				$("#switch-1").show();
				$("#switch-2").hide();
			} else if ($this.attr('value') === "switch-2") {
				$("#switch-1").hide();
				$("#switch-2").show();
			}
	
		}); 
		
		// tab - pills toggle
		$('#show-tabs').click(function() {
			$this = $(this);
			if($this.prop('checked')){
				$("#widget-tab-1").removeClass("nav-pills").addClass("nav-tabs");
			} else {
				$("#widget-tab-1").removeClass("nav-tabs").addClass("nav-pills");
			}
			
		});
			
	};
	
	// end pagefunction
	
	// run pagefunction on load

	pagefunction();


</script>